<template>
	<div>
		<div class="font-size18 font-bold margin-bottom20 color252630">图片库</div>
		<el-form inline :model="query" label-width="80">
			<el-form-item>
				<el-select placeholder="选择分类" v-model="query.imgId" class="width260 margin-right20" clearable>
					<el-option v-for="(item,index) in imageTypeAll" :key="index" :label="item.typeName"
						:value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-button type="primary" icon="el-icon-search" class="margin-left10" @click="handleSearch">搜索</el-button>
			<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
		</el-form>
		<div class="row-me">
			<el-button type="primary" @click="handleEdit">批量上传</el-button>
			<el-button type="primary" @click="batchDel">批量删除</el-button>
		</div>
		<el-table :data="tableData" border class="margin-top20" header-cell-class-name="table-header-style"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center"></el-table-column>
			<el-table-column type="index" width="55" align="center" label="序号"></el-table-column>
			<el-table-column prop="id" label="ID" align="center" width="80"></el-table-column>
			<el-table-column label="图片" align="center">
				<template slot-scope="scope">
					<el-image class="width80 height80" :src="scope.row.url" :preview-src-list="[scope.row.url]"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="tails.typename" label="图片分类" align="center"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
			<el-table-column label="操作" align="center" width="160" fixed="right">
				<template slot-scope="scope">
					<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
					<el-popconfirm title="确认删除？" @confirm="handleDel(scope.row.id)">
						<el-button slot="reference" type="text">删除</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="query.pageNumber"
				:page-sizes="[30, 40, 50, 60]" @size-change="handleSizeChange" :page-size="query.pageSize" :total="pageTotal"
				@current-change="handlePageChange"></el-pagination>
		</div>

		<!-- 批量上传 编辑 -->
		<el-dialog :title="title" :visible.sync="visible" width="40%">
			<el-form :model="form" label-width="80px">
				<el-form-item label="分类">
					<el-select placeholder="请选择上传的分类" v-model="form.imgId">
						<el-option v-for="(item,index) in imageTypeAll" :key="index" :label="item.typeName"
							:value="item.id"></el-option>
					</el-select>
					<el-button type="text" @click="clickCreateType">新建分类</el-button>
				</el-form-item>
				<el-form-item label="上传图片" v-if="$.isEmpty(form.id)">
					<uploadLocal :value="fileList" @input="getImgData"></uploadLocal>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="handleSave" v-if="$.isEmpty(form.id)">确 定</el-button>
				<el-button type="primary" @click="handleImgSave" v-else>确 定</el-button>
			</span>
		</el-dialog>

		<!-- 新增编辑分类 -->
		<el-dialog title="分类" :visible.sync="typeVisible" width="40%" @close="getImageTypeAll">
			<el-table :data="typeTableData" border>
				<el-table-column label="分类名称" align="center">
					<template slot-scope="{row}">
						<el-input v-model="row.typeName" v-if="row.isEdit"></el-input>
						<span v-else>{{row.typeName}}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button type="text" v-if="scope.row.isEdit" @click="handleTypeAdd(scope.row)">保存</el-button>
						<el-button type="text" @click="$set(scope.row,'isEdit',true)" v-else>编辑</el-button>
						<el-popconfirm title="确认删除？" @confirm="handleTypeDel(scope.row.id)">
							<el-button slot="reference" type="text">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="typeQuery.pageNumber"
					:page-sizes="[10, 20, 30, 40]" @size-change="handleSizeTypeChange" :page-size="typeQuery.pageSize"
					:total="pageTypeTotal" @current-change="handlePageTypeChange"></el-pagination>
			</div>
			<div class="margin-top20 row-me center-all">
				<el-input v-model="typeQuery.typeName" placeholder="请输入分类名称" class="margin-right20 width300"></el-input>
				<el-button type="primary" @click="handleTypeAdd">新增</el-button>
			</div>
			<span slot="footer">
				<el-button type="primary" @click="typeVisible = false">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import uploadLocal from "@/components/Upload/multiUploadLocal"
	export default {
		components: {
			uploadLocal
		},
		data() {
			return {
				query: {
					pageNumber: 1,
					pageSize: 30
				},
				pageTotal: 0,
				tableData: [],
				imageTypeAll: [],
				title: '',
				visible: false,
				form: {
					files: []
				},
				typeVisible: false,
				typeTableData: [],
				typeQuery: {
					pageNumber: 1,
					pageSize: 10
				},
				pageTypeTotal: 0,
				multipleSelection: [],
				fileList: []
			}
		},
		mounted() {
			this.getData()
			this.getImageTypeAll()
		},
		methods: {
			//批量删除
			async batchDel() {
				if (this.multipleSelection.length != 0) {
					let ids = Array.from(this.multipleSelection, ({
						id
					}) => id)
					const res = await this.$post('/admin/image/imageDelete', ids)
					if (res.code == 1000) {
						this.$message.success('批量删除成功')
						this.getData()
					}
				} else {
					this.$message.warning('请选择批量删除的数据!')
				}
			},
			//多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			//点击新建分类
			clickCreateType() {
				this.getTypeData()
				this.typeVisible = true
			},
			// 新增编辑分类
			handleTypeAdd(row) {
				let url = '/admin/image/imageTypeSave'
				let params = {
					typeName: this.typeQuery.typeName
				}
				if (row.id) {
					url = "/admin/image/imageTypeUpdate"
					params = {
						id: row.id,
						typeName: row.typeName
					}
				}
				this.$post(url, params).then(res => {
					if (res.code == 1000) {
						this.$message.success('操作成功')
						this.getTypeData()
						this.typeQuery.typeName = ''
						if (row.id) {
							row.isEdit = false
						}
					}
				})
			},
			//删除分类
			async handleTypeDel(id) {
				const res = await this.$postForm('/admin/image/imageTypeDelete', {
					id
				})
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getTypeData()
				}
			},
			//获取分类数据
			async getTypeData() {
				const res = await this.$postForm('/admin/image/imageTypeAll', this.typeQuery)
				if (res.code == 1000) {
					this.typeTableData = res.data.list
					this.pageTypeTotal = res.data.totalRow
				}
			},
			getImgData(data) {
				this.form.files = data
			},
			//批量上传
			async handleSave() {
				if (this.$.isEmpty(this.form.imgId)) {
					this.$message.warning('请选择分类!')
					return
				}
				if (this.form.files.length == 0) {
					this.$message.warning('请选择图片!')
					return
				}
				let arr = []
				for (let item of this.form.files) {
					arr.push({
						imgId: this.form.imgId,
						url: item
					})
				}
				const res = await this.$post('/admin/image/imageSaveAll', arr)
				if (res.code == 1000) {
					this.$message.success('批量上传成功')
					this.getData()
					this.visible = false
				}
			},
			// 编辑
			async handleImgSave() {
				if (this.$.isEmpty(this.form.imgId)) {
					this.$message.warning('请选择分类!')
					return
				}
				const res = await this.$post('/admin/image/imageUpdate', {
					id: this.form.id,
					imgId: this.form.imgId,
					url: this.form.url
				})
				if (res.code == 1000) {
					this.$message.success('编辑成功')
					this.getData()
					this.visible = false
				}
			},
			//批量上传,编辑
			handleEdit(row) {
				if (row.id) {
					this.title = '编辑'
					this.form = JSON.parse(JSON.stringify(row))
				} else {
					this.title = '批量上传'
					this.form = {}
				}
				this.visible = true
			},
			//删除
			async handleDel(id) {
				let ids = [id]
				const res = await this.$post('/admin/image/imageDelete', ids)
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
				}
			},
			//获取图库分类
			async getImageTypeAll() {
				const res = await this.$postForm('/admin/image/imageTypeList')
				if (res.code == 1000) {
					this.imageTypeAll = res.data.list
				}
			},
			async getData() {
				const res = await this.$postForm(
					`/admin/image/imageAll?pageNumber=${this.query.pageNumber}&pageSize=${this.query.pageSize}`, this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.getData();
			},
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			},
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData();
			},
			//分类分页
			handlePageTypeChange(val) {
				this.typeQuery.pageNumber = val
				this.getTypeData();
			},
			handleSizeTypeChange(val) {
				this.typeQuery.pageSize = val
				this.getTypeData();
			},
		}
	}
</script>

<style>
</style>